import React, { useEffect, useState } from 'react';
import axios from 'axios'
import { List } from 'react-vant';
import { useDispatch } from 'react-redux';
const Home = () => {
  const [list, setList] = useState([])
  const [pageCode, setPageCode] = useState(1)
  const dispatch = useDispatch()
  const getList = async () => {
    const resp = await axios.get('/api/list', { params: { pageCode } });
    console.log(resp.data.data)
    setList(list.concat(resp.data.data))
    setPageCode(pageCode + 1)
  }

  const handleAdd = v => {
    dispatch({
      type: 'add',
      payload: {
        ...v,
        count: 1,
        state: true
      }
    })
  }

  return (
    <div className='home'>
      <List className="list" onLoad={getList}>
        {
          list.map((v, i) => {
            return <dl key={i}>
              <dt>
                <img src={v.image} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <p>{v.desc}</p>
                <p>{v.price}</p>
                <button onClick={(() => handleAdd(v))}>加入购物车</button>
              </dd>
            </dl>

          })
        }
      </List>
    </div>
  )
}

export default Home